<template>
  <a-modal
    class="modify-account-dialog"
    v-model:visible="dialogState.visible"
    :title="dialogState.title"
    :form-state="dialogState.formState"
    okText="确认"
    cancelText="取消"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <a-form
      ref="formRef"
      :model="dialogState.formState"
      :rules="rules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="用户名" name="username">
        <a-input
          v-model:value="dialogState.formState.username"
          placeholder="请输入用户名"
        />
      </a-form-item>
      <a-form-item label="手机号" name="phone">
        <a-input
          v-model:value="dialogState.formState.phone"
          placeholder="请输入手机号"
        />
      </a-form-item>
      <a-form-item label="昵称" name="name">
        <a-input
          v-model:value="dialogState.formState.name"
          placeholder="请输入昵称"
        />
      </a-form-item>
      <a-form-item label="邮箱" name="mail">
        <a-input
          v-model:value="dialogState.formState.mail"
          placeholder="请输入邮箱"
        />
      </a-form-item>
      <a-form-item label="头像" name="avatar">
        <div class="modify-account-dialog__avatar-upload">
          <SingleImgUpload v-model:image-url="dialogState.formState.avatar" />
        </div>
      </a-form-item>
      <a-form-item label="是否启用" name="enabled">
        <a-switch
          v-model:checked="dialogState.formState.enabled"
          :disabled="dialogState.type === 'add'"
        />
      </a-form-item>
      <a-form-item label="角色绑定" name="avatar">
        <a-select
          mode="multiple"
          v-model:value="dialogState.formState.currentRole"
          style="width: 100%"
          placeholder="Please select"
        >
          <a-select-option
            v-for="role in dialogState.roleList"
            :key="role.id"
            >{{ role.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { SingleImgUpload } from '@/components/Upload'

import type { DialogState } from '../types'

withDefaults(
  defineProps<{
    dialogState: DialogState
    confirmLoading?: boolean
  }>(),
  {
    confirmLoading: false,
  }
)

const emits = defineEmits<{
  (e: 'confirm'): void
}>()

const formRef = ref()
const rules = {
  username: [{ required: true, message: '用户名必填', trigger: 'blur' }],
  phone: [{ required: true, message: '手机号必填', trigger: 'blur' }],
}

const handleOk = async () => {
  try {
    await formRef.value.validate()
    emits('confirm')
  } catch (_) {
    console.error('验证不通过')
  }
}
</script>

<style lang="scss">
@include b(modify-account-dialog) {
  @include e(avatar-upload) {
    width: 96px;
    height: 96px;
  }
}
</style>
